<style lang="less" scoped>
    @import "./user-detail.less";
</style>

<template>
    <Card>
        <Spin size="large" fix v-if="pageLoading">
            <Icon type="load-c" size="23" style="animation: ani-demo-spin 1s linear infinite;"></Icon>
            <div>加载中...</div>
        </Spin>
        <div class="title">用户信息</div>
        <div class="info-table">
            <table>
                <tbody>
                    <tr>
                        <td class="table-td-label left-border top-border">登录名</td>
                        <td class="table-td-value top-border">{{ userInfo.username }}</td>

                        <td class="table-td-label top-border">用户名</td>
                        <td class="table-td-value top-border">{{ userInfo.nickname }}</td>

                        <td class="table-td-label top-border">用户类型</td>
                        <td class="table-td-value top-border">{{ userTypeText }}</td>
                    </tr>

                    <tr>
                        <td class="table-td-label left-border">手机号</td>
                        <td class="table-td-value">{{ userInfo.telephone }}</td>

                        <td class="table-td-label">邮箱</td>
                        <td class="table-td-value">{{ userInfo.email }}</td>

                        <td class="table-td-label">部门</td>
                        <td class="table-td-value">{{ userInfo.memberOf }}</td>
                    </tr>

                    <tr>
                        <td class="table-td-label left-border">LDAP存在</td>
                        <td class="table-td-value">{{ ldapExistText }}</td>

                        <td class="table-td-label">是否启用</td>
                        <td class="table-td-value">{{ enabledText }}</td>

                        <td class="table-td-label">是否锁定</td>
                        <td class="table-td-value">{{ lockedText }}</td>
                    </tr>

                    <tr>
                        <td class="table-td-label left-border">创建时间</td>
                        <td class="table-td-value">{{ userInfo.createAt }}</td>

                        <td class="table-td-label">更新时间</td>
                        <td class="table-td-value" colspan="3">{{ userInfo.updateAt }}</td>
                    </tr>

                    <tr>
                        <td class="table-td-label left-border" width="100%">说明</td>
                        <td class="table-td-value" colspan="5">{{ userInfo.description }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="height: 15px;" />
        <Tabs value="module" :animated="false">
            <TabPane label="可以登录的系统" name="module">
                <Tag 
                    v-for="item in userAllModule" 
                    :key="item" 
                    :name="item" 
                    color="green" 
                    closable 
                    style="margin: 5px 15px 5px 0;"
                    @on-close="delUserModuleHander">
                        {{ item }}
                    </Tag>
                <Button icon="ios-plus-empty" type="dashed" size="small" style="margin: 5px 15px 5px 0;" @click="showAddModal">添加可登录的系统</Button>
            </TabPane>
            <TabPane label="拥有的角色" name="roles">
            <!--
                <Form :model="queryRolesParams" :label-width="80" :inline="true">
                    <FormItem label="角色名称" prop="name">
                        <Input v-model="queryRolesParams.name" placeholder="输入角色名称模糊匹配" style="width: 260px;" clearable @on-keydown.enter="queryRolesData"></Input>
                    </FormItem>
                    <Button type="primary" style="margin-left: 8px" @click="queryRolesData">查询</Button>
                </Form>
            -->
                <Table size="small" :columns="rolesTableColumns" :data="rolesTableData" stripe border/>
            </TabPane>
            <TabPane label="拥有的权限" name="permission">
                <Table size="small" :columns="permissionTableColumns" :data="permissionTableData" stripe border/>
            </TabPane>
        </Tabs>
        <div style="height: 50px;" />

        <Modal title="添加可登录的系统" :mask-closable="false" v-model="addModal.show">
            <Form ref="addForm" :model="addUserModule" :label-width="90" :inline="false" :rules="addFormRuleValidate">
                <Row>
                    <FormItem label="系统系统名" prop="module">
                        <Input v-model="addUserModule.module" placeholder="请输入" @on-keydown.enter="addRowSubmit"></Input>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="closeAddModal">取消</Button>
                <Button type="primary" :loading="addModal.loading" @click="addRowSubmit">确定</Button>
            </div>
        </Modal>
    </Card>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
    data () {
        return {
            username: null,
            userTypeArray: [
                { value: '0', label: '自定义用户' },
                { value: '1', label: 'LDAP用户' },
            ],
            ldapExistArray: [
                { value: '0', label: '不存在', color: '#ff9900' },
                { value: '1', label: '存在', color: '#19be6b' },
            ],
            lockedArray: [
                { value: '0', label: '未锁定', color: '#19be6b' },
                { value: '1', label: '锁定', color: '#ff9900' },
            ],
            enabledArray: [
                { value: '0', label: '禁用', color: '#ff9900' },
                { value: '1', label: '启用', color: '#19be6b' },
            ],
            resourcesTypeArray: [
                { value: '1', label: '自动生成' },
                { value: '2', label: '自定义' },
            ],
            rolesTableColumns: [
                { title: '#', type: 'index', width: 60, align: 'center' },
                { title: '角色名称', key: 'name', width: 260 },
                { title: '说明', key: 'description', ellipsis: true },
                { title: '创建时间', key: 'createAt', width: 150 },
                { title: '更新时间', key: 'updateAt', width: 150 }
            ],
            permissionTableColumns: [
                { title: '#', type: 'index', width: 60, align: 'center' },
                { title: '系统名称', key: 'module', width: 150 },
                { title: '权限标题', key: 'title', width: 350 },
                { title: '权限标识字符串', key: 'permission', width: 350 },
                { title: '权限类型', key: 'resourcesType', width: 120, render: (h, { row }) => {
                    let resourcesType = this.$data.resourcesTypeArray.find(item => item.value==row.resourcesType);
                    if(!resourcesType || !resourcesType.label){
                        resourcesType = { value: '', label: '未知' }
                    }
                    return h('span', resourcesType.label);
                }},
                { title: '说明', key: 'description', ellipsis: true },
                { title: '创建时间', key: 'createAt', width: 150 },
                { title: '更新时间', key: 'updateAt', width: 150 }
            ],
            addFormRuleValidate: {
                module: [ { required: true, message: '系统系统名必填', trigger: 'blur', whitespace: true } ]
            }
        };
    },
    mounted() {
        const username = this.$route.params.username;
        this.$data.username = username;
        if (username) {
            this.init(username);
        } else {
            this.$router.push({ name: 'error-404' });
        }
    },
    computed: {
        ...mapState('UserDetail', ['pageLoading', 'userInfo', 'userAllModule', 'rolesTableData', 'permissionTableData', 'addModal', 'addUserModule']),
        userTypeText() {
            const userType = this.$data.userTypeArray.find(item => item.value == this.userInfo.userType);
            return userType ? userType.label : '未知';
        },
        ldapExistText() {
            const ldapExist = this.$data.ldapExistArray.find(item => item.value == this.userInfo.ldapExist);
            return ldapExist ? ldapExist.label : '未知';
        },
        enabledText() {
            const enabled = this.$data.enabledArray.find(item => item.value == this.userInfo.enabled);
            return enabled ? enabled.label : '未知';
        },
        lockedText() {
            const locked = this.$data.lockedArray.find(item => item.value == this.userInfo.locked);
            return locked ? locked.label : '未知';
        }
    },
    methods: {
        ...mapActions('UserDetail', ['init', 'addUserModuleSubmit', 'delUserModuleSubmit']),
        // ...mapMutations('UserDetail', ['']),
        rolesPageChange(pageNo) {
            if (this.queryRolesParams.pageNo !== pageNo){
                this.queryRolesParams.pageNo = pageNo;
                this.queryRolesData(this.queryRolesParams);
            }
        },
        rolesPageSizeChange(pageSize) {
            if (this.queryRolesParams.pageSize !== pageSize) {
                this.queryRolesParams.pageNo = 1;
                this.queryRolesParams.pageSize = pageSize;
                this.queryRolesData(this.queryRolesParams);
            }
        },
        closeAddModal() {
            this.addModal.show = false;
        },
        showAddModal() {
            this.$refs.addForm.resetFields();
            this.addModal.show = true;
        },
        addRowSubmit() {
            this.$refs.addForm.validate().then((flag) => {
                if (flag) {
                    this.addUserModuleSubmit();
                }
            });
        },
        delUserModuleHander(event, name) {
            console.log(name);
            this.delUserModuleSubmit(name);
        }
    }
};
</script>
